<template>
    <div class="wrapper">
        <div class="header">
            <mt-header title="融资配资">
                <router-link to="/user" slot="left">
                    <mt-button icon="back">我的</mt-button>
                </router-link>
            </mt-header>
        </div>

        <div class="box-tab">
            <div class="tab-title">
                <span class="circle"></span>风险保证金：
            </div>
            <div style="margin: 0 10px;">
                <input v-model="bondValue" type="text" placeholder="请输入风险保证金" @blur="setTotal" style=" width: 100%; line-height: 40px; border-bottom: 0.01rem solid #ddd;">
            </div>
        </div>
        <div class="box-tab">
            <div class="tab-title">
                <span class="circle"></span>申请额度：
            </div>
            <ul class="radio-group clearfix" style="padding: 0 0 0 10px;">
                <li v-for="(item,index) in quotaList" :key="index" @click="quotaIndex = index;setTotal()" style=" width: 30%; height: auto; line-height: 18px; text-align: center; ">
                    <div :class="quotaIndex == index?'on':''" style="padding: 5px 0;">
                        <p style=" font-size: 14px;">{{item.multiple}}倍</p>
                        <p style=" color: rgba(255, 255, 255, .6); ">日利率{{item.rate}}</p>
                        <p style=" color: rgba(255, 255, 255, .4); ">{{item.price}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div style=" padding: 20px 0; line-height: 24px; text-align: center; opacity: .8; ">
            <p>每个合约至少2个交易日</p>
            <p>首次申请将扣除2个交易日的管理费</p>
            <p style=" font-size: 15px; color: #ff8000;">共需支付{{totalValue}}</p>
        </div>

        <div style="padding: 20px;">
            <mt-button class="btn-red" size="small" type="danger" @click="doSubmit" style="display: block; padding: 15px 0; width: 100%; ">下单</mt-button>
        </div>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mint-ui'
    import {
        isNull
    } from '@/utils/utils'
    import * as api from '@/axios/api'

    export default {
        data() {
            return {
                bondValue: '',

                quotaIndex: 0,
                quotaList: [{
                        multiple: 10,
                        rate: 0.6,
                        price: 100000
                    },
                    {
                        multiple: 9,
                        rate: 0.6,
                        price: 90000
                    },
                    {
                        multiple: 8,
                        rate: 0.6,
                        price: 80000
                    },
                    {
                        multiple: 7,
                        rate: 0.6,
                        price: 70000
                    },
                    {
                        multiple: 6,
                        rate: 0.6,
                        price: 60000
                    },
                ],
                totalValue: 0,
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            setTotal() {
                if (!this.bondValue) {
                    return 0
                }

                let quota = this.quotaList[this.quotaIndex]
                this.totalValue = Number(this.bondValue) * quota.multiple + Number(this.bondValue) * quota.rate
            },
            async doSubmit() {
                if (!this.bondValue) {
                    Toast('请输入风险保证金')
                    return
                }

                return

                let opts = {
                    stockId: '',
                    buyNum: ''
                }
                let data = await api.buy(opts)
                if (+data.status === 0) {
                    Toast(data.data)
                    this.$router.push('/user')
                } else {
                    Toast(data.msg)
                }
            },
        }
    }
</script>
